<template>
    <div id="city">
        <div class="left">
            <div >
                <p>热门城市</p>
                <p>
                    <span>北京</span>
                    <span>上海</span>
                    <span>天津</span>
                    <span>合肥</span>
                    <span>郑州</span>
                </p>
                 <div>
                    <p>A</p>
                    <p>阿克苏</p>
                    <p>安康</p>
                    <p>安庆</p>
                </div>
                <div>
                    <p>B</p>
                    <p>白山</p>
                    <p>白城</p>
                    <p>宝鸡</p>
                </div>
                <div>
                    <p>C</p>
                    <p>沧州</p>
                    <p>长春</p>
                    <p>昌吉</p>
                </div>
                <div>
                    <p>D</p>
                    <p>大理</p>
                    <p>大连</p>
                    <p>大庆</p>
                </div>
                <div>
                    <p>E</p>
                    <p>鄂尔多斯</p>
                    <p>恩施</p>
                    <p>鄂州</p>
                </div>
            </div>
        </div>
        <div class="right">
            <div>
                <p>A</p>
                <p>B</p>
                <p>C</p>
                <p>D</p>
                <p>E</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'City'
    }
</script>

<style scoped>
.left{
    float: left;
    border-right: 1px solid #ccc;
    width: 90%;
    background-color: #fff5f0;
}
.right{
    float: right;
    width: 8%;
}
#city{
    overflow: hidden;
    padding-bottom: 10px;
}
.left div p:first-child{
    background: #f0f0f0;
}
p{
    line-height: 30px;
    padding-left: 10px;
}
span{
    background-color: #fff;
    border: 1px solid #ccc;
    width: 80px;
    height: 35px;
    margin: 10px 10px 5px 0px;
    display: inline-block;
    text-align: center;
}
.left div:first-child{
    margin-top: 20px;
}
</style>